-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: rewrite the preset #24
base: main
Are you sure you want to change the base?
Conversation
Hey, I'd be willing to review and accept this, but you'd need to update docs to reflect your changes and increment the major version in |
Sorry for late response. I'll address those. Thanks. |
Hello again 👋 So I refactored it, fixed the Typescript errors, and wrote docs for changed features, plus a migrations guide from v2. Please review and let me know what you think. Thanks |
aa93674
to
c132f44
Compare
Hey @endigma ! Not at all. I learned things! Note, if you follow commits the changes on docs might confuse you. I tried to move current doc to a V2 folder and add my doc to V3 folder, but couldn't figure out how to handle things (like in colors page, v2 use radix-colors v2 and v3 radix-colors v3, I didn't know how to use two version of a radix-colors in same time). So, eventually, I gave up and overwrite your docs (v2) with my docs (v3). Let me know if there is anything confusion, or any suggestion you have. |
This is a complete rewrite of the preset and many missing features are added.
Instead of adding all 12 shades of a color at the start, this adds color shades as they are used, unless they are safeListed. So always, the minimum amount of css is added to your project.
Mechanism:
There is a colorsInUse object that keeps track of colors used.
There is a unocss shortcut that runs when a radix color is used in a utility token, and add the color to colorsInUse.
In preflight, based on colorsInUse, it add css variables.
palette option is removed.
new options are introduced.
useP3Colors (boolean)
to use P3 colors with fallbacks
safeListColors:
a list of colors or color-shades to preserve
safeListAliases:
a list of aliases to preserve
onlyOneTheme ('dark' | 'light' | undefined):
if your app has only one theme, you can indicate with this, so only 'dark' or 'light' colors are added to css.